<template>
    <div class="wrapper">
        <div class="titel-row">
            <div class="home-icon">
                <img src="../../assets/inquiryRegister/home.png" alt>
            </div>
            <div class="title">证照核发</div>
        </div>
        <div class="content">
            <SearchHeader v-on:callback="onSearchCallback" v-bind:config="searchConfig" />
            <div class="table-wrapper">
                <el-table v-on:cell-click="onClickRow" :row-class-name="tableRowClassName" stripe ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" row-key="id">
                    <!-- <el-table-column type="selection" width="55"></el-table-column> -->
                    <el-table-column :formatter="item.formatter" v-for="(item,index) in thConfig" :key="index" v-bind:prop="item.prop" v-bind:label="item.label"></el-table-column>
                    <el-table-column label="操作" width="180">
                        <template slot-scope="scope">
                            <el-tooltip content="查看" placement="top">
                                <el-button v-on:click.stop.prevent="onDetail(scope.row)" icon="el-icon-search" size="small" circle />
                            </el-tooltip>
                            <el-tooltip content="制证" placement="top">
                                <el-button v-if="scope.row.status != 5" type="primary" style="margin-left: 10px" v-on:click.stop.prevent="licensingHandler(scope.row)" size="small" circle>
                                    <img style="width:12px" src="../../assets/accreditionWorkbench/zz-icon.png">
                                </el-button>
                            </el-tooltip>
                            <el-tooltip content="驳回" placement="top">
                                <el-button v-if="scope.row.status != 5" style="margin-left: 10px" v-on:click.stop.prevent="rejectHandler(scope.row)" size="small" circle>
                                    <img style="width:12px" src="../../assets/inquiryRegister/reject.png">
                                </el-button>
                            </el-tooltip>
                            <el-tooltip content="取件" placement="top">
                                <el-button v-if="scope.row.status == 5" type="success" style="margin-left: 10px" v-on:click.stop.prevent="qjHandler(scope.row)" size="small" circle>
                                    <img style="width:12px" src="../../assets/accreditionWorkbench/qj-icon.png">
                                </el-button>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pager">
                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listRequest.pageNum" :page-size="10" prev-text="上一页" next-text="下一页" layout="total, prev, pager, next" :total="total"></el-pagination>
            </div>
        </div>
        <AddDialog/>
        <ViewDetail width="800px" :dialogVisible="detailVisible" @onClose="detailVisible=false" :list="detailData" :columns="detailColumns" />
        <LicensingDialog :dialogVisible="LicensingVisible" @onClose="LicensingVisible=false" @callBack="licensingcallBack" :record="licensingItem" />
        <QjDialog :dialogVisible="QjVisible" @onClose="QjVisible=false" @callBack="licensingcallBack" :record="qjItem" />
    </div>
</template>

<script>
import SearchHeader from "../../components/layout/searchHeader.vue"; //搜索栏
import AddDialog from "../../components/inquiryRegister/addDialog.vue"; //新增dialog
import { Popover, ViewDetail } from "../../components/common"; //小弹窗
import LicensingDialog from "../../components/licensing/licensingDialog.vue"; //制证弹窗
import QjDialog from "../../components/licensing/qjDialog.vue"; //取件弹窗
import Pubsub from "../../utils/pubsub";
const addIcon = require("../../assets/inquiryRegister/add.png");
const editIcon = require("../../assets/inquiryRegister/edit.png");
const deleteIcon = require("../../assets/inquiryRegister/delete.png");
const dispatchIcon = require("../../assets/inquiryRegister/dispatch.png");
const rejectIcon = require("../../assets/inquiryRegister/reject.png");
import {
    getMakePageInfo,
    tyAddHandle,
    findByDictCode,
    tyEditHandle,
    getZzDetailById,
    distribute,
    cardReject
} from "../../config/api.js";
import { getTimeStr } from "../../utils";
export default {
    components: {
        SearchHeader,
        AddDialog,
        Popover,
        ViewDetail,
        LicensingDialog,
        QjDialog
    },
    data() {
        return {
            listRequest: { pageNum: 1, pageSize: 10 }, //列表请求餐来
            detailVisible: false, //详情窗口显示隐藏
            LicensingVisible: false, //制证窗口显示隐藏
            QjVisible: false, //取件窗口显示隐藏
            detailData: {}, //详情数据
            licensingItem: {}, //制证项的数据
            qjItem: {}, //取件项的数据
            areaCode: [], //数据字典返回值--区域
            total: 0, //共多少条
            handleType: "", //操作预审登记状态，add为新增，edit为编辑。
            currentRow: {}, //当前操作的项
            thConfig: [
                // { prop: "ems", label: "快递编码" },
                { prop: "applyPersonName", label: "申请单位/人" },
                // { prop: "applyPersonAddress", label: "地址" },
                { prop: "handleInfoName", label: "办理事项" },
                { prop: "handlePersonName", label: "经办人" },
                { prop: "handlePersonTelNo", label: "联系电话" },
                {
                    prop: "getTypeName",
                    label: "取证方式",
                    formatter: function(row) {
                        if (row.getTypeName === "到付邮寄") {
                            return (
                                <span style={{ color: "#00a01e" }}>
                                    {row.getTypeName}
                                </span>
                            );
                        }
                        return row.getTypeName;
                    }
                },
                { prop: "maked", label: "是否制证" }
            ], //table头部配置
            tableData: [],
            searchConfig: [
                //搜索栏配置
                {
                    label: "申请单位/人",
                    code: "keyword",
                    type: "search",
                    value: ""
                },
                {
                    label: "办理事项",
                    code: "handleInfo",
                    type: "select",
                    value: "",
                    data: [{ name: "全部", value: "" }]
                },
                {
                    label: "取证方式",
                    code: "getType",
                    type: "radio",
                    value: "",
                    data: [
                        { name: "全部", value: "", active: true },
                        { name: "现场取件", value: "1", active: false },
                        { name: "到付邮寄", value: "0", active: false }
                    ]
                },
                {
                    label: "所属区域",
                    code: "areaCode",
                    type: "radio",
                    value: "",
                    data: [{ name: "全部", value: "", active: true }],
                    delectVisible: false
                }
            ],
            detailColumns: [
                {
                    title: "申请单位/人",
                    dataIndex: "applyPersonName"
                },
                {
                    title: "证件类型",
                    dataIndex: "cardTypeName"
                },
                {
                    title: "证件号码",
                    dataIndex: "cardNum"
                },
                {
                    title: "证件有效期",
                    dataIndex: "s",
                    render: row => {
                        if (!row.startTime) {
                            return "-";
                        }
                        let startTime = row.startTime.substr(0, 10);
                        let endTime = "-";
                        if (row.endTime) {
                            endTime = row.endTime.substr(0, 10);
                        }
                        return `${startTime} 至 ${endTime}`;
                    }
                },
                {
                    title: "证件附件",
                    type: "img",
                    dataIndex: "filePath"
                },
                {
                    title: "地址",
                    dataIndex: "applyPersonAddress"
                },
                {
                    title: "办理事项",
                    dataIndex: "handleInfoName"
                },
                {
                    title: "经办人",
                    dataIndex: "handlePersonName"
                },
                {
                    title: "联系电话",
                    dataIndex: "handlePersonTelNo"
                },
                {
                    title: "取证方式",
                    dataIndex: "getTypeName"
                },
                {
                    title: "备注",
                    dataIndex: "remark"
                }

                // {
                //     title: "是否制证",
                //     dataIndex: "maked"
                // }
            ]
        };
    },
    methods: {
        /**
         * 搜索栏回调
         */
        onSearchCallback(re = {}) {
            let request = Object.assign(this.listRequest, re);
            this.listRequest = request;
            this.getList();
        },
        /**
         * 设置table某一项class
         */
        tableRowClassName({ row, rowIndex }) {
            // if (rowIndex === 2) {
            //   return "warning-row";
            // }
            if (rowIndex % 2 === 0) {
                return "even-row";
            } else {
                return "odd-row";
            }
        },
        /**
         * 查看详情
         */
        onDetail(e) {
            // this.detailData=e||{};//传参
            getZzDetailById({ id: e.id }).then((result = {}) => {
                this.detailData = result.data || {}; //传参
            });
            this.detailVisible = true;
        },
        //删除，不需要任何事件，只为处理事件冒泡。
        onDelete() {},
        /**
         * 制证
         */
        licensingHandler(e) {
            this.licensingItem = e;
            this.LicensingVisible = true;
        },
        rejectHandler(e) {
            this.$confirm("确定驳回该记录?", "提示", {})
                .then(() => {
                    cardReject({ id: e.id }).then(() => {
                        this.$message({
                            type: "success",
                            message: "驳回成功"
                        });
                        this.getList();
                    });
                })
                .catch(() => {});
        },
        /**
         * 取件
         */
        qjHandler(e) {
            this.qjItem = e;
            this.QjVisible = true;
        },
        /**
         * 制证/取件-回调
         */
        licensingcallBack(e) {
            this.LicensingVisible = false;
            this.QjVisible = false;
            this.getList();
        },

        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.listRequest.pageNum = val;
            this.getList();
        },
        /**
         * 操作按钮点击事件
         */
        openModal(type, values) {
            if (type == "dispatch") {
                this.dispatch(values);
                return;
            } else {
                this.handleType = "add"; //新增
            }
            Pubsub.publish(type, { type: "tysl", handleType: "add" });
        },
        getList() {
            getMakePageInfo(this.listRequest).then((res = {}) => {
                this.tableData = res.rows;
                this.total = res.total || 0;
            });
        },
        /**
         * 获取数据字典--区域
         */
        getDictCode() {
            findByDictCode({ dictCode: "areaCode" }).then((res = {}) => {
                if (res.data && res.data.length) {
                    this.areaCode = res.data || [];
                    res.data.map(item => {
                        this.searchConfig[3].data.push({
                            name: item.dictDataName,
                            value: item.dictDataCode,
                            active: false
                        });
                    });
                }
            });
            findByDictCode({ dictCode: "handleInfo" }).then((res = {}) => {
                if (res.data && res.data.length) {
                    res.data.map(item => {
                        this.searchConfig[1].data.push({
                            name: item.dictDataName,
                            value: item.dictDataCode
                        });
                    });
                }
            });
        },
        /**
         * 点击table row
         */
        onClickRow(row) {
            this.$refs.multipleTable.toggleRowSelection(row);
        }
    },
    created() {
        this.getList();
        this.getDictCode();
    }
};
</script>

<style lang = "scss" scoped>
.wrapper {
    margin: 20px;
    background: #fff;
}
.titel-row {
    display: flex;
    align-items: center;
    .home-icon {
        height: 50px;
        width: 50px;
        background: #1a36a9;
        margin-right: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .title {
        font-size: 22px;
        color: #272c67;
    }
}
.content {
    padding: 0 20px 80px 20px;
}
.pager {
    margin-top: 30px;
    display: flex;
    justify-content: flex-end;
}
.table-wrapper {
    position: relative;
    margin-top: 46px;
    .handle-row {
        position: absolute;
        top: -40px;
        right: 0;
        display: flex;
        justify-content: flex-end;
    }
    .handle-btn {
        width: 76px;
        height: 30px;
        border-radius: 3px;
        margin-right: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
            margin-right: 10px;
        }
        &:last-child {
            margin-right: 0;
        }
        &:active {
            opacity: 0.8;
        }
        &.main {
            background: #1a36a9;
            color: #fff;
        }
        &.green {
            background: #007130;
            color: #fff;
        }
        &.default {
            background: #e5e5e5;
        }
        &:disabled {
            background: #999;
            opacity: 1;
        }
    }
}
</style>
<style>
</style>
